<template>
  <div class="inventory-ledger-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>库存台账</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleExport">导出台账</el-button>
          </div>
        </div>
      </template>

      <el-form :inline="true" :model="queryForm" class="search-form">
        <el-form-item label="物料编码">
          <el-input
            v-model="queryForm.materialCode"
            placeholder="请输入物料编码"
          />
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input
            v-model="queryForm.materialName"
            placeholder="请输入物料名称"
          />
        </el-form-item>
        <el-form-item label="仓库">
          <el-select
            v-model="queryForm.warehouse"
            placeholder="请选择仓库"
            clearable
          >
            <el-option
              v-for="item in warehouseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="queryForm.batchNo" placeholder="请输入批次号" />
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="queryForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 期初期末汇总 -->
      <el-descriptions :column="4" border class="summary-info">
        <el-descriptions-item label="期初数量">{{
          openingQuantity
        }}</el-descriptions-item>
        <el-descriptions-item label="期初金额">{{
          openingAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="期末数量">{{
          closingQuantity
        }}</el-descriptions-item>
        <el-descriptions-item label="期末金额">{{
          closingAmount
        }}</el-descriptions-item>
      </el-descriptions>

      <!-- 收发存明细表 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :summary-method="getSummary"
        show-summary
      >
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="materialCode" label="物料编码" width="150" />
        <el-table-column prop="materialName" label="物料名称" min-width="150" />
        <el-table-column prop="specification" label="规格型号" width="120" />
        <el-table-column prop="unit" label="单位" width="80" />
        <el-table-column prop="warehouse" label="仓库" width="120" />
        <el-table-column prop="batchNo" label="批次号" width="120" />
        <el-table-column label="入库" width="200">
          <el-table-column prop="inQuantity" label="数量" width="100" />
          <el-table-column prop="inAmount" label="金额" width="100" />
        </el-table-column>
        <el-table-column label="出库" width="200">
          <el-table-column prop="outQuantity" label="数量" width="100" />
          <el-table-column prop="outAmount" label="金额" width="100" />
        </el-table-column>
        <el-table-column label="结存" width="200">
          <el-table-column prop="balanceQuantity" label="数量" width="100" />
          <el-table-column prop="balanceAmount" label="金额" width="100" />
        </el-table-column>
        <el-table-column prop="documentNo" label="单据号" width="180" />
        <el-table-column prop="documentType" label="单据类型" width="120">
          <template #default="scope">
            <el-tag :type="getDocumentTagType(scope.row.documentType)">
              {{ getDocumentTypeText(scope.row.documentType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="150" />
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 明细对话框 -->
      <el-dialog v-model="detailDialogVisible" title="单据明细" width="80%">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="单据号">{{
            currentDetail.documentNo
          }}</el-descriptions-item>
          <el-descriptions-item label="单据类型">{{
            getDocumentTypeText(currentDetail.documentType)
          }}</el-descriptions-item>
          <el-descriptions-item label="日期">{{
            currentDetail.date
          }}</el-descriptions-item>
          <el-descriptions-item label="制单人">{{
            currentDetail.creator
          }}</el-descriptions-item>
          <el-descriptions-item label="审核人">{{
            currentDetail.approver
          }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{
            currentDetail.remark
          }}</el-descriptions-item>
        </el-descriptions>

        <el-table :data="currentDetail.items" border class="mt-20">
          <el-table-column prop="materialCode" label="物料编码" width="150" />
          <el-table-column
            prop="materialName"
            label="物料名称"
            min-width="150"
          />
          <el-table-column prop="specification" label="规格型号" width="120" />
          <el-table-column prop="unit" label="单位" width="80" />
          <el-table-column prop="warehouse" label="仓库" width="120" />
          <el-table-column prop="location" label="库位" width="120" />
          <el-table-column prop="batchNo" label="批次号" width="120" />
          <el-table-column prop="quantity" label="数量" width="100" />
          <el-table-column prop="price" label="单价" width="100" />
          <el-table-column prop="amount" label="金额" width="100" />
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";

// 查询表单
const queryForm = ref({
  materialCode: "",
  materialName: "",
  warehouse: "",
  batchNo: "",
  dateRange: [],
});

// 表格数据
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);

// 期初期末数据
const openingQuantity = ref(0);
const openingAmount = ref(0);
const closingQuantity = ref(0);
const closingAmount = ref(0);

// 明细对话框
const detailDialogVisible = ref(false);
const currentDetail = ref({});

// 获取单据类型标签样式
const getDocumentTagType = (type) => {
  const map = {
    "purchase-in": "success",
    "sales-out": "danger",
    "production-in": "primary",
    "production-pick": "warning",
    "inventory-profit": "success",
    "inventory-loss": "danger",
    "other-in": "info",
    "other-out": "info",
  };
  return map[type] || "";
};

// 获取单据类型文本
const getDocumentTypeText = (type) => {
  const map = {
    "purchase-in": "采购入库",
    "sales-out": "销售出库",
    "production-in": "生产入库",
    "production-pick": "生产领料",
    "inventory-profit": "盘盈入库",
    "inventory-loss": "盘亏出库",
    "other-in": "其他入库",
    "other-out": "其他出库",
  };
  return map[type] || type;
};

// 表格合计行
const getSummary = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "合计";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
      sums[index] = sums[index].toFixed(2);
    } else {
      sums[index] = "";
    }
  });
  return sums;
};

// 查询方法
const handleSearch = () => {
  // 实现查询逻辑
};

const handleReset = () => {
  queryForm.value = {
    materialCode: "",
    materialName: "",
    warehouse: "",
    batchNo: "",
    dateRange: [],
  };
  handleSearch();
};

// 导出方法
const handleExport = () => {
  // 实现导出逻辑
  ElMessage.success("导出成功");
};

// 查看明细
const handleViewDetail = (row) => {
  currentDetail.value = row;
  detailDialogVisible.value = true;
};

// 分页方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleSearch();
};
</script>

<style scoped>
.inventory-ledger-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.summary-info {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.mt-20 {
  margin-top: 20px;
}
</style>
